<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>会员注册页面</title>

    <%--静态包含base标签，css标签，jQuery文件--%>
    <%@include file="/pages/common/head.jsp" %>
    <script type="text/javascript">
        //页面加载完成后
        $(function () {
            $("#username").blur(function () {
                //1.获取用户名
                var username = this.value;
                $.getJSON("userServlet", "action=ajaxExistsUsername&username=" + username, function (data) {
                    if (data.existsUsername) {
                        $("span.errorMsg").text("用户名已存在!")
                    } else {
                        $("span.errorMsg").text("用户名可用!")
                    }
                });
            })
        })

    </script>

    <script type="text/javascript">
        $(function () {
            //给验证码绑定单击事件
            $(function () {
                $("#code_img").click(function () {
                    this.src = "${basePath}kaptcha.jpg?d=" + new Date(); //防止浏览器缓存导致点击验证码不刷新

                });
            })
            //给注册绑定单击事件
            $("#sub_btn").click(function () {
                /*验证用户名：必须由字母，数字下划线组成，并且长度为 5 到 12 位 */
                //1 获取用户名输入框的内容
                var usenametxt = $("#username").val();
                //2 创建正则表达式
                var usernamePatt = /^\w{5,12}$/;
                //3 使用test方法验证
                if (!usernamePatt.test(usenametxt)) {
                    //4 提示用户结果
                    $("span.errorMsg").text("用户名不合法!")
                    return false;
                }

                /*验证密码：必须由字母，数字下划线组成，并且长度为 5 到 12 位*/
                //1 获取输入密码内容
                var passWordtxt = $("#password").val();
                //2 创建正则表达式
                var passWordPatt = /^\w{5,12}$/;
                //3 使用test方法验证
                if (!passWordPatt.test(passWordtxt)) {
                    //4 提示用户结果
                    $("span.errorMsg").text("输入密码不合法!")
                    return false;
                }


                /*验证确认密码：和密码相同*/
                //1 获取确认密码内容
                var repwdtxt = $("#repwd").val();
                //2 和密码作比较
                if (repwdtxt != passWordtxt) {
                    //3 提示用户结果
                    $("span.errorMsg").text("密码不一致!")
                    return false;
                }


                //邮箱验证：xxxxx@xxx.com
                var emailText = $("#email").val();
                var emailPatt = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;
                if (!emailPatt.test(emailText)) {
                    $("span.errorMsg").text("输入邮箱不合法");
                }


                //验证码：现在只需要验证用户已输入。因为还没讲到服务器。验证码生成。
                var codeText = $("#code").val();
                //去掉前后空格
                codeText = $.trim(codeText);
                if (codeText == null || codeText == "") {
                    //4 提示用户
                    $("span.errorMsg").text("验证码不能为空！");
                    return false;
                }
                $("span.errorMsg").text("");
            });
        });

    </script>
    <style type="text/css">
        .login_form {
            height: 420px;
            margin-top: 25px;
        }

    </style>
</head>
<body>
<div id="login_header">

</div>

<div class="login_banner">

    <div id="l_content">
        <span class="login_word">欢迎注册</span>
    </div>

    <div id="content">
        <div class="login_form">
            <div class="login_box">
                <div class="tit">
                    <h1>注册会员</h1>
                    <span class="errorMsg">
                        ${requestScope.msg}
                    </span>
                </div>
                <div class="form">
                    <form action="userServlet" method="post">
                        <input type="hidden" name="action" value="regist">
                        <label>用户名称：</label>
                        <input class="itxt" type="text" placeholder="请输入用户名" value="${requestScope.username}"
                               autocomplete="off" tabindex="1"
                               name="username" id="username"/>
                        <br/>
                        <br/>
                        <label>用户密码：</label>
                        <input class="itxt" type="password" placeholder="请输入密码" autocomplete="off" tabindex="1"
                               name="password" id="password"/>
                        <br/>
                        <br/>
                        <label>确认密码：</label>
                        <input class="itxt" type="password" placeholder="确认密码" autocomplete="off" tabindex="1"
                               name="repwd" id="repwd"/>
                        <br/>
                        <br/>
                        <label>电子邮件：</label>
                        <input class="itxt" type="text" placeholder="请输入邮箱地址" value="${requestScope.email}"
                               autocomplete="off" tabindex="1"
                               name="email" id="email"/>
                        <br/>
                        <br/>
                        <label>验证码：</label>
                        <input class="itxt" type="text" name="code" style="width: 80px;" id="code"/>
                        <img id="code_img" alt="" src="kaptcha.jpg" style="
									float: right; margin-right: 40px; width: 130px; height: 40px;">
                        <br/>
                        <br/>
                        <input type="submit" value="注册" id="sub_btn"/>

                    </form>
                </div>

            </div>
        </div>
    </div>
</div>
<%@include file="/pages/common/footer.jsp" %>
</body>
</html>